<template>
  <Modal
    loading
    ref="roleTreeModal"
    :value="modal"
    :mask-closable="false"
    :closable="false"
    width="500px"
    title="选择上级角色">
    <div class="tree-modal">
      <Row>
        <Radio label="顶级角色" v-model="isTopRole" border @on-change="checkTopRole"/>
      </Row>
      <Divider small>更多角色</Divider>
      <Input suffix="ios-search" placeholder="输入角色名称搜索" width="100%" v-model="searchWord" @input="searchTree"/>
      <Row class="tree-role">
        <Tree ref="roleTree" :data="roleTree" @on-select-change="checkRoleTree" :render="renderContent"/>
      </Row>
      <Row>
        <Alert style="height:40px;margin-top: 10px" show-icon>当前选择的角色:
          <span class="select-count">{{selectedRole && selectedRole.title}}</span>
        </Alert>
      </Row>
    </div>
    <div slot="footer">
      <Button type="default" @click="roleTreeCancel">取消</Button>
      <Button type="primary" @click="roleTreeSubmit">完成</Button>
    </div>

  </Modal>
</template>

<script>
  import {getRoleTree} from '@/api/role'


  export default {
    name: "roletree",
    data: () => ({
      rolemgt: {},
      open: false,
      isTopRole: false,
      searchWord: "",
      roleTree: [],//上级角色下拉树
      selectedRole: {},
    }),
    methods: {
      checkTopRole() {
        let selectedRole = this.$refs.roleTree.getSelectedNodes()[0];
        if (selectedRole) {
          this.$refs.roleTree.getSelectedNodes()[0].selected = false;
        }
        this.selectedRole = {};
        this.selectedRole.id = 0;
        this.selectedRole.title = "顶级角色";
        this.selectedRole.level = 0;
      },
      searchTree() {
        this.initRoleTree();
      },
      checkRoleTree() {
        this.isTopRole = false;
        this.selectedRole = this.$refs.roleTree.getSelectedNodes()[0];
      },
      resetRoleTreeModal() {
        this.searchWord = "";
        this.isTopRole = false;
        this.selectedRole = {};
      },
      roleTreeCancel() {
        this.resetRoleTreeModal();
        this.open = false;
        this.rolemgt.$refs.addForm.refreshRole();
      },
      roleTreeSubmit() {
        if (this.isTopRole || this.$refs.roleTree.getSelectedNodes().length > 0) {
          this.open = false;
        } else {
          this.$Message["warning"]({background: true, content: '请选择一个上级角色'});
        }
        this.rolemgt.$refs.addForm.refreshRole();
        this.rolemgt.$refs.editForm.refreshRole();
      },
      renderContent(h, {root, node, data}) {
        let level = node.node.level;
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: level === 0 ? 'md-paper-plane' : level === 1 || level === 2 ? 'md-reorder' : level === 3 ? 'ios-ionitron' : 'ios-leaf'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span',
              {
                style: {
                  display: "inline-block",
                  cursor: "pointer",
                  background: node.node.selected ? "#d5e8fc" : "#fff", //根据选中状态设置样式
                  color: node.node.selected ? "#515a6e" : "#515a6e",
                  borderRadius: "3px",
                  padding: "3px"
                },
                on: {
                  click: () => {
                    if (!node.node.selected)
                      this.$refs.roleTree.handleSelect(node.nodeKey); //手动选择树节点
                  }
                }
              }, data.title)
          ])

        ]);
      },
      initRoleTree() {
        let roleName = this.searchWord;
        let roleId = this.rolemgt.$refs.editForm.roleId;
        getRoleTree({roleName, roleId}).then(res => {
          const data = res.data;
          if (!!res.data) {
            this.roleTree = [];
            this.roleTree.push(...data);
          }
        }).catch(err => {
          console.error("加载角色表格出错" + err);
        });
      },
    },
    mounted() {
      this.rolemgt = this.$parent.$parent;
      this.resetRoleTreeModal();
    },
    computed: {
      modal() {
        return this.open;
      },
    },
  }
</script>

<style scoped>

</style>
